<template>
  <div class="warn-device-dialog">
    <a-row :gutter="30" type="flex" style="align-items: center">
      <a-col :span="10">
        <img src="../assets/warn.png" alt="warning" style="width: 100%" />
      </a-col>
      <a-col :span="14">
        <text-row-tight label="设备名称" :text="details.field2" />
        <text-row-tight label="告警类型" :text="details.warn_type_name" />
        <text-row-tight label="告警内容" :text="details.warn_content" />
        <text-row-tight label="告警时间" :text="details.warn_time" />
        <text-row-tight label="告警地点" :text="details.warn_place" />
      </a-col>
    </a-row>
    <div v-if="showHandleBtn" class="warn-device-btn">
      <a-button @click="handleWarn(1)">指派</a-button>
      <a-button @click="handleWarn(4)">无效</a-button>
    </div>
  </div>
</template>

<script>
import { dialog } from '@gis/lib/components/antd-dialog';
import { alarmDevDetails } from '@gis/lib/api';
import { openMsgWarnHandleDialog } from '../../../views/alarm/msg-warn-handle.js';
export default {
  name: 'warn-device-dialog',
  components: {},
  props: {
    data: { type: [Object, String], default: () => ({}) },
  },
  data() {
    return {
      details: {},
    };
  },
  computed: {
    showHandleBtn() {
      return this.details.is_handle == 1;
    },
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data) {
        if (typeof data === 'string') {
          this.getDataAsync(data);
        } else {
          this.details = data;
        }
      },
    },
  },
  methods: {
    async getDataAsync(id) {
      const params = { id };
      this.details = this.handleCommonResult(await alarmDevDetails(params), { defaultValue: {} });
    },
    handleWarn(type) {
      openMsgWarnHandleDialog(
        {
          mode: { 1: '指派', 4: '无效' }[type],
          data: this.details,
          extraParams: {
            c_type_id: this.details.c_type_id,
            p_type_id: this.details.p_type_id,
          },
          onAssignSuccess: (val) => {},
        },
        {
          title: { 1: '转为事件并指派', 4: '标记为无效' }[type],
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
.warn-device-dialog {
  padding: 30px 20px 30px 40px;
  .warn-device-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
